<template>
  <div class="app-container home">
    <query-panel
      :form-data="queryParams"
      @handleQuery="handleQuery"
      :spacing="20"
      label-width="125px"
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="编组方式：" prop="groupMethod">
            <el-select
              v-model="queryParams.groupMethod"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="dict in dict.type.sys_group_method"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="子系统名称：" prop="subSystem">
            <el-select
              v-model="queryParams.subSystem"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="dict in dict.type.sys_sub_system_name"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="系统名称：" prop="systemName">
            <el-select
              v-model="queryParams.systemName"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="dict in dict.type.sys_system_name"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="规格型号：" prop="specificationModel">
            <el-select
              v-model="queryParams.specificationModel"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="dict in dict.type.sys_specification_model"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="制造厂家：" prop="manufacturer">
            <el-select
              v-model="queryParams.manufacturer"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="dict in dict.type.sys_manufacturer"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="子系统构型码："
            prop="subSystemConfigurationCode"
          >
            <el-select
              v-model="queryParams.subSystemConfigurationCode"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="dict in dict.type.sub_system_configuration_code"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </query-panel>
    <table-panel
      ref="tablePanel"
      align="left"
      table-data="/maintain/maintain/quote/quoteGroupList"
      :queryParams="queryParams"
      :columns="columns"
      :operateArray="operateArray"
      @onOperate="onOperate"
      @selection-change="handleSelect"
    >
      <template slot="tableTop">
        <el-button
          class="tableAdd table-add-btn"
          type="primary"
          plain
          size="mini"
          @click="onAdd"
          ><svg-icon icon-class="add_icon" style="width: 18px; height: 16px" />
          新增</el-button
        >
        <el-button
          class="table-delete-btn"
          plain
          size="mini"
          @click="handleDelete"
          ><svg-icon
            icon-class="table-column-delete"
            style="width: 18px; height: 16px"
          />
          删除</el-button
        >
      </template>
      <template #groupMethod="{ row }">
        <dict-tag
          :options="dict.type.sys_group_method"
          :value="row.groupMethod"
        />
      </template>
      <template #configurationType="{ row }">
        <dict-tag
          :options="dict.type.sys_configuration_type"
          :value="row.configurationType"
        />
      </template>
    </table-panel>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="open"
      v-if="open"
      :width="showState == '!' ? '1300px' : '1550px'"
      append-to-body
    >
      <add
        ref="addInfo"
        @changeopen="open = false"
        :menu-options="menuOptions"
        :normalizer="normalizer"
        :title="dialogTitle"
      />
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="mini"
          class="tableAdd"
          @click="submitForm"
          >保存</el-button
        >
        <el-button
          class="dialogCancel"
          type="primary"
          size="mini"
          @click="cancel"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TablePanel from "@/components/TablePanel/index.vue";
import QueryPanel from "@/components/QueryPanel/index.vue";
import Add from "./src/Add.vue";
import { addQuote, details, deleteQuoteGroup, editQuote } from "@/api/offerManage/index";
import { serachNodeList } from "@/api/nodeManage/node";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "nodeIndex",
  dicts: [
    "sys_system_name",
    "sys_sub_system_name",
    "sub_system_configuration_code",
    "sys_group_method",
    "sys_configuration_type",
    "sys_manufacturer",
    "sys_specification_model",
  ],
  components: {
    TablePanel,
    QueryPanel,
    Add,
    Treeselect,
  },
  data() {
    return {
      queryParams: {
        groupMethod: "",
        configurationType: "",
        systemName: "",
        specificationModel: "",
        manufacturer: "",
        subSystemConfigurationCode: "",
        subSystem: "",
      },
      operateArray: [
        {
          name: "编辑",
          icon: "table-column-edit",
        },
        {
          name: "删除",
          icon: "table-column-delete",
        },
      ],
      columns: [
        {
          type: "checkout",
          width: "50px",
        },
        {
          field: "groupMethod",
          label: "编组方式",
          slots: { default: "groupMethod" }
        },
        {
          field: "nodeName",
          label: "所属平台"
        },
        {
          label: "操作",
          width: "200px",
          fixed: "right",
        },
      ],
      open: false,
      allSelectList: [],
      menuOptions: [],
      dialogTitle: "新增",
      showState: ''
    };
  },

  created() {
    serachNodeList({ moduleType: 2 }).then((res) => {
      this.menuOptions = res.rows;
    });
    this.showState = sessionStorage.getItem('showState')
  },
  methods: {
    // 查询
    handleQuery() {
      this.$refs.tablePanel.getTable();
    },
    // 新增
    onAdd() {
      this.open = true;
      this.dialogTitle = "新增";
      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
    },
    cancel() {
      this.open = false;
    },
    submitForm() {
      const url = this.dialogTitle === "新增" ? addQuote : editQuote;
      const params = [
        {
          ...this.$refs.addInfo.form
        },
        {
          ...this.$refs.addInfo.newForm,
          groupMethod: this.$refs.addInfo.form.groupMethod,
          nodeId: this.$refs.addInfo.form.nodeId
        }
      ]
      url(params)
        .then((res) => {
          this.$message.success("操作成功！");
          this.open = false;
          this.$refs.tablePanel.getTable();
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("操作失败！");
        });
    },
    onOperate(type, row) {
      console.log('row', row.nodeId);
      if (type === "编辑") {
        this.dialogTitle = "编辑";
        this.open = true;
        const params = {
          groupMethod: row.groupMethod,
          nodeId: row.nodeId
        }
        this.$refs.getInfo = params
        details(params).then(res => {
          const data = res.data;
          this.$nextTick(() => {
            data.forEach(item => {
              if (item.configurationType == 1) {
                this.$refs.addInfo.form = item;
              } else if (item.configurationType == 2) {
                this.$refs.addInfo.newForm = item;
              }
              this.$refs.addInfo.total += item.totalPrice;
            })
            // this.$refs.addInfo.form = res.data;
          })
        });
      } else if (type === "删除") {
        const params = [{
          groupMethod: row.groupMethod,
          nodeId: row.nodeId
        }]
        this.$confirm("确认删除吗？").then(() => {
          deleteQuoteGroup(params)
            .then((res) => {
              this.$refs.tablePanel.getTable();
              this.$message.success("操作成功！");
            })
            .catch((err) => {
              this.$message.error("操作失败！");
            });
        });
      }
    },
    // 删除按钮
    handleDelete() {
      let params = [];
      if (this.allSelectList.length === 0) {
        return this.$message.warning("请至少选择一条数据！");
      }
      this.allSelectList.forEach(item => {
        params.push({
          groupMethod: item.groupMethod,
          nodeId: item.nodeId
        })
      })
      this.$confirm("确认删除所选数据吗？").then(() => {
        deleteQuoteGroup(params)
          .then((res) => {
            this.$refs.tablePanel.getTable();
            this.$message.success("操作成功！");
          })
          .catch((err) => {
            this.$message.error("操作失败！");
          });
      });
    },
    // 表格多选回调
    handleSelect(row) {
      this.allSelectList = row;
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children === null) {
        delete node.children;
      }
      return {
        id: node.nodeId,
        label: node.nodeName,
        children: node.children,
      };
    },
  },
};
</script>

<style scoped lang="scss">
.table-delete-btn {
  width: 80px;
  height: 32px;
  font-size: 16px;
  background: #fff;
  border-color: #dcdcdc;
  color: rgba(0, 0, 0, 0.9);
  padding-left: 12px;
  &:hover {
    border-color: #dcdcdc;
    color: rgba(0, 0, 0, 0.9);
  }
}
::v-deep .el-form-item__content .el-select--small {
  width: 100%;
}
::v-deep .cell {
  span {
    font-size: 16px;
  }
  .ordinary-btn {
    width: 80px;
    height: 32px;
    border: 1px solid #dcdcdc;
    font-size: 16px;
    span {
      color: #333333e6;
    }
  }
}
</style>
